<template>
	<view class="box">
		<view class="row">
			<text>手机号</text>
			<input type="text" v-model="phone" placeholder="输入手机号" maxlength="12" />
		</view>
		<view class="row">
			<view class="send">
				<text>验证码</text>
				<text @click="getCode">{{msg}}</text>
			</view>
			<input type="text" v-model="code" placeholder="- - - -" maxlength="4" />
		</view>
		<view class="row">
			<text style="font-size: 23rpx;">收不到验证码？试试 <text style="color:#00BB00;font-size: 23rpx;"> 语音验证</text></text>
			<!--   -->
			<button type="primary" style="width: 90%;border-radius: 80rpx;margin-top: 50rpx;" @click="toLogin">登录</button>
		</view>
		<view class="row">
			<!-- <text style="color: #006699;text-align: center;" >通过微信授权登录</text> -->
		</view>
	</view>
</template>

<script>
	let app = getApp()

	export default {
		data() {
			return {
				phone: "16623305184",
				isSend: false, // 开关变量
				timer: null,
				msg: "获取手机验证码",
				code: ""
			}

		},
		onLoad() {
			this.toLogin()
		},
		methods: {
			async getCode() {
				if (this.isSend) {
					return
				}
				// 正则验证
				let regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
				if (!regExp.test(this.phone)) {
					uni.showToast({
						title: "手机号有误",
						icon: "none",
					})
					return
				}
				// 获取数据
				let res = await this.$Api._sms({
					phone: this.phone
				})
				// 获取成功
				if (res.data.list != null) { //获取到了数据
					if (this.timer) {
						// 如果存在 清除定时器
						clearInterval(timer)
					}
					let num = 30;
					this.timer = setInterval(() => {
						num--;
						this.msg = num + "秒重新获取"
						if (num <= 0) {
							this.msg = "重新获取验证码"
							this.isSend = false
						}
					}, 1000)
					// 改变开关
					this.isSend = true;
					// 存储验证码跟手机号
					uni.setStorageSync("code", res.data.list.code)
					uni.setStorageSync("tel", this.phone)
				}
			},
			//执行登录
			async toLogin() {
				// 获取手机号跟验证码
				let phone = this.phone;
				let code = this.code;
				// 获取数据库里的手机号跟验证码
				let isCode = uni.getStorageSync("code")
				let tel = uni.getStorageSync("tel");
				// 判断是否一致 不一致则return 不执行
				if (code != isCode) {
					uni.showToast({
						title: "您输入的验证码有误",
						icon: "none"
					})
					return
				}
				if (phone != tel) {
					uni.showToast({
						title: "你输入的手机号有误",
						icon: "none"
					})
					return
				}
				// 一致则获取手机号进行登录
				let res = await this.$Api._wxlogin({
					phone: tel
				});
				console.log(res)
				// 判断是否登录成功
				if (res.data.code == 200) {
					uni.showToast({
						title: "登录成功"
					})
					setTimeout(() => {
						uni.switchTab({
							url: "../mine/mine"
						})
					}, 1500)
				} else {
					uni.showToast({
						title: "手机号或验证码有误",
						icon: "none"
					})
				}
				uni.setStorageSync("token",res.data.list.token)
				uni.setStorageSync("uid",res.data.list.uid)
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	.box {
		position: relative;
	}

	.row {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 40rpx;
	}

	.send {
		display: flex;
		justify-content: space-between;
	}

	.send text:nth-of-type(2) {
		color: #00BB00;
	}

	text {
		font-size: 27rpx;
		margin-bottom: 10rpx;
	}

	input {
		border-bottom: 1rpx solid gray;
		height: 65rpx;
	}
</style>
